<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <p>{{name}}</p>
    <p>{{age}}</p>
    <button onclick="fn(this)">点击</button>
  </div>

  <script>
    function fn(_this){
      console.log(event)
      console.log(_this)
    }
    let data = {name: 'zf', age: 10}
    let app = document.getElementById('app')
    let inputs = app.getElementsByTagName('input')
    // 获取app下面除了input之外的所有子元素节点
    let nodeList = [...app.children].filter(item => item.nodeName != 'INPUT')
    for(let item of inputs){
      if(item.getAttribute('v-model')){
        item.value = data[item.getAttribute('v-model')]
      }
    }
    let reg = /\{\{(\w+)}}/
    nodeList.forEach(item => {
      if(reg.test(item.innerHTML)){
        item.innerHTML = item.innerHTML.replace(reg, (...arg)=>data[arg[1]])
      }
    });

    Object.defineProperties(data, {
      name: {
        set(val){
          for(let item of inputs){
            if(item.getAttribute('v-model')){
              item.value = val
            }
          }

        }
      },
      age: {}
    })

    data.name = 'mq'
    console.log(data)

  </script>
</body>
</html>